<template>
  <div class="News">
    <div class="news-box">
      <div class="news-item">
        <div class="news-top clearfix">
          <h3 class="left">{{ category[0].title }}</h3>
          <router-link class="more right" :to="{ path: '/advisory', query: { id: category[0].article_category_id }}">
            查看更多<img src="~/assets/images/modo.png" />
          </router-link>
        </div>
        <div class="news-content">
          <div class="news-list clearfix">
            <router-link
              :to="{ path: '/advisory/details/' + item.article_id }"
              v-for="(item, index) in list1"
              :key="index"
              class="newsItem transition"
            >
              <div class="pic-box" v-if="index < 4">
                <img :src="item.image_input" :alt="item.title" />
                <span class="news-date">{{ item.create_time }}</span>
              </div>
              <div class="desc">
                <h3>{{ item.title }}</h3>
                <div class="text overflow">
                  {{ item.synopsis }}
                </div>
              </div>
            </router-link>
          </div>
        </div>
      </div>
      <div class="news-item">
        <div class="news-top clearfix">
          <h3 class="left">{{ category[1].title }}</h3>
          <router-link :to="{ path: '/advisory', query: { id: category[1].article_category_id }}" class="more right">
            查看更多<img src="~/assets/images/modo.png" alt="" />
          </router-link>
        </div>
        <div class="news-content">
          <div class="news-list clearfix">
            <router-link
              :to="{ path: '/advisory/details/' + item.article_id }"
              v-for="(item, index) in list2"
              :key="index"
              class="newsItem transition"
            >
              <div class="pic-box" v-if="index < 4">
                <img :src="item.image_input" :alt="item.title" />
                <span class="news-date">{{ item.create_time }}</span>
              </div>
              <div class="desc">
                <h3>{{ item.title }}</h3>
                <div class="text overflow">
                  {{ item.synopsis }}
                </div>
              </div>
            </router-link>
          </div>
        </div>
      </div>
      <div class="news-item">
        <div class="news-top clearfix">
          <h3 class="left">{{ category[2].title }}</h3>
          <router-link :to="{ path: '/advisory', query: { id: category[2].article_category_id }}" class="more right">
            查看更多<img src="~/assets/images/modo.png" />
          </router-link>
        </div>
        <div class="news-content">
          <div class="news-list clearfix">
            <router-link
              :to="{ path: '/advisory/details/' + item.article_id }"
              v-for="(item, index) in list3"
              :key="index"
              class="newsItem transition"
            >
              <div class="pic-box" v-if="index < 4">
                <img :src="item.image_input" :alt="item.title" />
                <span class="news-date">{{ item.create_time }}</span>
              </div>
              <div class="desc">
                <h3>{{ item.title }}</h3>
                <div class="text overflow">
                  {{ item.synopsis }}
                </div>
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getNewsCategory, getNewsList } from "@/request/api"

export default {
  name: "HomeNews",
  data() {
    return {
      category: [{}, {}, {}],
      list1: [],
      list2: [],
      list3: []
    }
  },
  mounted() {
    this.getCate()
  },
  methods: {
    getList(id, i) {
      let that = this
      getNewsList({ cid: id }).then(res => {
        switch (i) {
          case "0":
            that.list1 = res.data.list
            break
          case "1":
            that.list2 = res.data.list
            break
          case "2":
            that.list3 = res.data.list
            break
        }
      })
    },
    getCate() {
      let that = this
      getNewsCategory().then(res => {
        that.category = res.data
        for (var i in res.data) {
          that.getList(res.data[i].article_category_id, i);
        }
      }).catch(err => {
        this.$message.error(err.message)
      })
    }
  }
};
</script>

<style scoped>
@import "~@/assets/style/common.scss";
@import "~@/assets/style/base.css";
.news-box {
  display: flex;
  margin-top: 30px;
  margin-left: -20px;
}
.news-item {
  width: 450px;
  margin-left: 20px;
  background: #fff;
  padding: 20px 10px 10px;
  border: 1px solid #e9e9e9;
}

.news-top h3 {
  font-size: 18px;
  font-weight: bold;
  color: #e48b2c;
  line-height: 30px;
}
.news-top .more {
  font-size: 14px;
  color: #e48b2c;
  line-height: 30px;
}
.news-top img {
  margin-left: 5px;
}
.news-content {
  margin-top: 12px;
}
.news-content .news-list a {
  display: block;
  display: flex;
  margin-bottom: 20px;
}

.news-list .pic-box {
  width: 180px;
  height: 110px;
  position: relative;
  background: #fff;
}
.news-list .pic-box img {
  width: 100%;
  height: 100%;
  display: block;
}
.news-list .pic-box .news-date {
  position: absolute;
  bottom: 0;
  left: 0;
  color: #fff;
  background: rgba(228, 139, 44, 0.8);
  padding: 6px;
  box-sizing: border-box;
  width: 90px;
  overflow: hidden;
  height: 30px;
  line-height: 20px;
}
.news-list .desc {
  width: 230px;
  margin-left: 20px;
}
.news-list .desc h3 {
  font-size: 15px;
  /* font-weight: bold; */
  color: #666;
  padding: 18px 0 10px;
  border-bottom: 1px solid #e9e9e9;
}
.news-list .desc .text {
  color: #969696;
  margin-top: 12px;
  height: 38px;
}
.news-content .newsItem:hover {
  background: #e48b2c;
  /* margin-right: -11px; */
}
.news-content .newsItem:hover .news-date {
  background: #e48b2c;
}
.news-content .newsItem:hover .desc h3,
.news-content .newsItem:hover .desc .text {
  color: #fff;
}
.news-box {
  margin-top: 30px;
  margin-left: 0;
  justify-content: space-between;
}
.news-item {
  width: calc((100% - 40px) / 3);
  margin-left: 0;
}
</style>
